<template>
  <div class="tree-view-item">
    <div v-if="isObject(data)">
      <div class="tree-view-item-grouping" @click.stop="toggleOpen()">          
        <span :class="{opened: isOpen()}" v-if="!isRootObject(data)" class="tree-view-item-key tree-view-item-key-with-chevron">{{getKey(data)}}</span>
        <span class="tree-view-item-hint" v-show="!isOpen() && data.children.length === 1">{{data.children.length}} property</span>
        <span class="tree-view-item-hint" v-show="!isOpen() && data.children.length !== 1">{{data.children.length}} properties</span>
      </div>
      <tree-view-item v-show="isOpen()" v-for="(child,index) in data.children" :key="index" :data="child"></tree-view-item>
    </div>
    <div v-if="isArray(data)">
      <div class="tree-view-item-grouping" @click.stop="toggleOpen()">
        <span :class="{opened: isOpen()}" v-if="!isRootObject(data)" class="tree-view-item-key tree-view-item-key-with-chevron">{{getKey(data)}}</span>
        <span class="tree-view-item-hint" v-show="!isOpen() && data.children.length === 1">{{data.children.length}} item</span>
        <span class="tree-view-item-hint" v-show="!isOpen() && data.children.length !== 1">{{data.children.length}} items</span>
      </div>
      <tree-view-item v-show="isOpen()" v-for="(child,index) in data.children" :key="index" :data="child"></tree-view-item>
    </div>
    <div v-if="isValue(data)">
      <span class="tree-view-item-key">{{getKey(data)}}</span> 
      <span class="tree-view-item-divider">:</span>      
      <span class="tree-view-item-value">{{getValue(data)}}</span>
    </div>
  </div> 
</template>
<script>
  export default {
    name: 'tree-view-item',
    props: ["data", "keyType"],
    data: function(){
      return {
        open: true
      }
    },
    methods: {
      isOpen: function(){
        return this.isRootObject(this.data) || this.open;
      },
      toggleOpen:function(){
        this.open = !this.open;
      },
      isRootObject: function(value){
        return value.isRoot;
      },      
      isObject: function(value){
        return value.type === 'object';
      },
      isArray: function(value){
        return value.type === 'array';
      },
      isValue: function(value){
        return value.type === 'value';
      },
      getKey: function(value){
        if (_.isInteger(value.key)) {
          return value.key;
        } else {
          return "\""+ value.key + "\"";  
        }
      },    
      getValue: function(value){
        if (_.isNumber(value.value)) {
          return value.value
        }
        if (_.isNull(value.value)) {
          return "null"
        }
        if (_.isString(value.value)) {}
        return "\""+value.value+"\"";
      },
      isRootObject: function(value){
        return value.isRoot;
      } 
    }   
  }
</script>
<style>
.tree-view-item {
  font-family: monospace;
  font-size: 14px;
  margin-left: 18px;
}

.tree-view-item-grouping {
  cursor: pointer;
  position: relative;
}

.tree-view-item-key {
  font-weight: bold;
}

.tree-view-item-key-with-chevron {
  padding-left: 14px;
}

.tree-view-item-key-with-chevron.opened::before {
    top:4px;
    transform: rotate(90deg);  
    -webkit-transform: rotate(90deg);
}

.tree-view-item-key-with-chevron::before {
    color: #444;
    content: '\25b6';
    font-size: 10px;
    left: 1px;
    position: absolute;
    top: 3px;
    transition: -webkit-transform .1s ease;
    transition: transform .1s ease;
    transition: transform .1s ease, -webkit-transform .1s ease;
    -webkit-transition: -webkit-transform .1s ease;
}

.tree-view-item-hint {
  color: #ccc
}
</style>